<template>
  <div class="album">
    <div class="album-list">
      <div class="view-header">
        <div class="tag">
          <b>首页 > 相册</b>
        </div>
        <h1>相册</h1>
      </div>
      <div class="view-body">
        <div
          v-for="(item, index) in albumData"
          :key="index"
          class="album-item"
          @click="detail(item.id)"
        >
          <img :src="item.albumCoverPath" alt="" />
          <div class="foot-show">
            <span>{{ item.albumName }}</span>
          </div>
        </div>
      </div>
      <div class="page-item">
        <el-pagination
          v-model:current-page="pageData.pageNum"
          v-model:page-size="pageData.pageSize"
          background
          layout="prev, pager, next"
          :total="parseInt('' + pageData.total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="album-right">
      <Myself></Myself>
    </div>
  </div>
</template>

<script setup lang="ts">
import Myself from '@/components/Myself.vue';
import { onMounted, ref } from 'vue';
import { _pageAlbumList } from '@/pages/album/album.service.ts';
import { AlbumList } from '@/pages/album/album.types.ts';
import { PageRetVO } from '@/http/public.type.ts';
import router from '@/router';

const pageData = ref({
  pageNum: 1,
  pageSize: 16,
  total: 0
});

const albumData = ref<AlbumList[]>([]);

onMounted(() => {
  page();
});

function page() {
  _pageAlbumList(pageData.value).then((res: PageRetVO<AlbumList[]>) => {
    albumData.value = res.data.records;
    pageData.value.total = res.data.total;
  });
}

function handleSizeChange(e: number) {
  pageData.value.pageSize = e;
  page();
}

function handleCurrentChange(e: number) {
  pageData.value.pageNum = e;
  page();
}

function detail(id: string) {
  router.push(`/album-detail/${id}`);
}
</script>

<style scoped lang="less">
.album {
  width: 78vw;
  z-index: 50;
  margin: 0 auto 120px auto;
  position: relative;
  display: flex;

  .album-list {
    flex: 1;
    box-sizing: border-box;

    .page-item {
      width: 100%;
      margin-top: 20px;
      padding: 20px;
      box-sizing: border-box;
      background-color: var(--background-secondary);
      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--font-color);
    }

    .view-body {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 15px 0;

      .album-item {
        width: 100%;
        height: 200px;
        background-color: #e58181;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
        color: var(--font-color);
        box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
          var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

        &:hover > .foot-show {
          height: 100px;
        }

        &:hover > .foot-show > span {
          display: inline-block;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
        }

        .foot-show {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          background-color: var(--background-secondary);
          opacity: 0.9;
          border-radius: 0 0 10px 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-weight: bolder;
          cursor: pointer;
          transition: height 0.3s ease-in-out;

          span {
            display: none;
          }
        }
      }
    }

    .view-header {
      width: 100%;

      .writer-info {
        width: 100%;
        display: flex;
      }

      .tag {
        width: 100%;
        position: relative;
        z-index: 1000;
        font-size: 14px;
        display: flex;

        b {
          display: inline-flex;
          font-size: 14px;
          opacity: 0.9;
          padding: 0.125rem;
          --crane-text-opacity: 1;
          color: rgba(255, 255, 255, var(--crane-text-opacity));
          text-transform: uppercase;
          text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
        }

        ul {
          padding: 0;
          display: flex;
          margin-top: 0;
          margin-bottom: 0;
          margin-left: 10px;
          justify-content: center;
          align-items: center;

          li {
            font-size: 14px;
            margin-right: 14px;
            opacity: 0.7;
            --crane-text-opacity: 1;
            color: rgba(255, 255, 255, var(--crane-text-opacity));
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
          }

          em {
            opacity: 0.5;
          }
        }
      }

      h1 {
        margin-top: 15px;
        margin-bottom: 12px;
        font-weight: 800;
        z-index: 100;
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 45px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

        --crane-text-opacity: 1;
        color: rgba(255, 255, 255, var(--crane-text-opacity));
      }

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        font-size: 16px;
      }
    }
  }

  .album-right {
    width: 320px;
    margin-left: 20px;
    position: relative;
  }
}
</style>
